<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐属性【文本与图片对齐】</title>
		<!-- 垂直方向对象属性  vertical-align
		     使用方法：1.用于表格中单元个垂直居中
			          2.用于行内元素以及行内块元素的垂直居中
					【文本和图片垂直居中(对齐)效果】
					对齐分为四种：基线对齐、顶部对齐
					             居中对齐、底部对齐
	               元素种类：块元素、行元素、行内块元素
				   块元素特点：独占一块、设置宽高
				   行元素特点：一行内显示、不可设置宽高
				   网页：元素之间嵌套生成
				   行元素与块元素可以任意嵌套
				   前提：设置宽高---行套块
				                ---块套块   √
								---块套行   √
					前提：一行内显示---行套块  √
					               ---块套块  ×
								   ---块套行  √
								   ---行套行  √
		 -->
		 <style>
			im g:nth-child(1){
				 /* vertical-align：baseline 默认基线对齐*/
				 vertical-align: baseline;
			 }
			 /* 问题：派生选择器，特点：找后代  p   img*/
			i mg:nth-child(2){
			 	/* vertical-align：top 顶部对齐*/
			 	vertical-align: top;
				width: 500px;
				height: 500px;
				background: red;
			 }
			 img.baseline{
				 vertical-align: baseline;
			 }
			 img.top{
				 vertical-align: top;
			 }
			 img.middle{
				 vertical-align: middle;
			 }
			 img.bottom{
				 vertical-align: bottom;
			 }
		 </style>
	</head>
	<body>
		<!-- 需求结构：4个p， 嵌套文字：图片叫什么名字
		                     文字后加img，设定宽高：25~100px
							 每个图片后面加：基线对齐、顶部对齐
							 居中对齐、底部对齐
		 -->
		 <h1>文本与图片垂直属性</h1>
		 <p>ikun<img class="baseline" src="img/ikun.jpg" alt="ikun" width="100px" height="100px">基线对齐</p>
		 <p>ikun1<img class="top" src="img/xiaoheizi.png" alt="ikun1" width="100px" height="100px">顶部对齐</p>
		 <p>ikun2<img class="middle" src="img/xiaoheizi1.png" alt="ikun2" width="100px" height="100px">居中对齐</p>
		 <p>牢大<img class="bottom" src="img/th.jpg" alt="牢大" width="100px" height="100px">底部对齐</p>
		 <!-- css选择器--抓第一张图片......
		 思路：派生选择器：找后代+伪类选择器：添加效果【错误】
		 错误原因：html结构不符合派生特点：p包含4个img
		          伪类选择器，4个img需要在一个p中
		 p img：nth-child(1)
		 -->
	</body>
</html>